import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { NavBar, Icon } from 'antd-mobile';
import { Table } from 'antd';
import { routingStore } from '../../stores/index';
import GraphStore from '../../stores/GraphDataStore';
import ComponentStore from '../../stores/ComponentStore';
import Graph from '../../component/graph/graph';
import { AmountData } from '../../stores/GraphDataStore';
import { ColumnProps } from 'antd/lib/table/Column';
import DataPicker from '../../component/data_picker/DataPicker';
import { SelectionType } from '../../utils/common';

import './SubHome.scss';

interface SubHomeProps {
    graphStore: GraphStore;
    componentStore: ComponentStore;
}

const requestColumns: ColumnProps<AmountData>[] = [
    {
        title: '序号',
        render: function (text: string, data: AmountData, index: number) {
            return (index + 1);
        }
    },
    {
        title: '单位名称',
        dataIndex: 'name',
    }, {
        title: '受理量(个)',
        dataIndex: 'value',
    }, {
        title: '比例',
        render: function (text: string, data: AmountData, index: number) {
            return (data.value / 20000 * 100).toFixed(2) + '%';
        }
    }
];
const completedColumns: ColumnProps<AmountData>[] = [
    {
        title: '序号',
        render: function (text: string, data: AmountData, index: number) {
            return (index + 1);
        }
    },
    {
        title: '单位名称',
        dataIndex: 'name',
    }, {
        title: '办结工单量',
        dataIndex: 'value',
    },
    {
        title: '未办结工单量',
        dataIndex: 'secondValue'
    },
    {
        title: '按时结伴率',
        render: function (text: string, data: AmountData, index: number) {
            return (data.value / (data.secondValue! + data.value) * 100).toFixed(2) + '%';
        }
    }
];

const hotRequestColumns: ColumnProps<AmountData>[] = [
    {
        title: '序号',
        render: function (text: string, data: AmountData, index: number) {
            return index + 1;
        }
    },
    {
        title: '四级归口',
        dataIndex: 'name'
    },
    {
        title: '投诉数量(个)',
        dataIndex: 'value',
    },
    {
        title: '热点诉求占总单量比例(%)',
        render: function (text: string, data: AmountData, index: number) {
            return (data.value / 2500 * 100).toFixed(2) + '%';
        }
    }

];

const orgHotRequestColumns: ColumnProps<AmountData>[] = [
    {
        title: '单位名称',
        dataIndex: 'name'
    },
    {
        title: '工单量',
        dataIndex: 'value'
    },
    {
        title: '占当前归口比例',
        render: function (text: string, data: AmountData, index: number) {
            return (data.value / 5000 * 100).toFixed(2) + '%';
        }

    },
    {
        title: '占本时段总工单比例',
        render: function (text: string, data: AmountData, index: number) {
            return (data.value / 10000 * 100).toFixed(2) + '%';
        }
    },
];

const columnsList = [requestColumns, completedColumns, hotRequestColumns, orgHotRequestColumns];

columnsList.forEach(v => {
    v.forEach(e => {
        e.className = 'table-cell';
    });
});

@inject('componentStore', 'graphStore')
@observer
export default class SubHome extends Component<SubHomeProps> {
    render(): JSX.Element {
        const { graphStore, componentStore } = this.props!;
        const index = componentStore.graphListIndex;
        const graphList = graphStore.graphList;
        const curGraph = graphList[index];
        return (
            <div className="subHome-container">
                <NavBar
                    mode="light"
                    className="nav-bar"
                    icon={<Icon type="left" />}
                    onLeftClick={() => routingStore.goBack()}
                >
                    {curGraph.graphTitle}
                </NavBar>
                <div className="subHome-sub-container">

                    <div className="echart-container">
                        <div className="graph-header">
                            {
                                curGraph.graphSelections.map(
                                    (v: SelectionType[][], i: number) => (
                                        <DataPicker
                                            className="picker-class"
                                            graphSelections={v}
                                            isCascade={false}
                                            key={i}
                                            pickerType={v[0][0].label !== 'date'}
                                        />
                                    ))
                            }
                        </div>
                        <Graph
                            graphProps={curGraph}
                        />
                    </div>
                    <div className="line" />
                    <Table
                        className="table"
                        rowKey="title"
                        columns={columnsList[index]}
                        dataSource={curGraph.data}
                        bordered={true}
                        pagination={false}
                    />
                </div>
            </div>
        );
    }
}